<template>
  <Layout>
    <el-card class="project" v-for="(project, i) in projects" :key="project.id" shadow="hover">
      <div slot="header">
        <el-row>
          <el-col :span="16">
            <span>
              <g-link style="text-decoration: none; cursor: pointer" :to="'/repo/' + project.id">
                <i class="el-icon-edit-outline"></i>
                &nbsp;&nbsp;
                {{ project.name }}
              </g-link>
            </span>
          </el-col>
          <el-col :span="8">
            <div style="text-align: right">
              <el-button
                @click="goGithub(project.html_url)"
                style="padding: 3px 0"
                type="text"
                icon="el-icon-back"
              >前往GitHub</el-button>
              <el-button @click="share(i)" style="padding: 3px 0" type="text" icon="el-icon-share"></el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <div
        style="font-size: 0.9rem; line-height: 1.5; color: #606c71"
      >最近更新 {{ $util.utcToLocal(project.updated_at) }}</div>
      <div
        style="
          font-size: 1.1rem;
          line-height: 1.5;
          color: #303133;
          padding: 10px 0px 0px 0px;
        "
      >{{ project.description }}</div>

      <div style="font-size: 1.1rem;color: #303133;padding: 10px 0px 0px 0px">
        <el-row>
          <el-col :span="16" style="padding-top: 5px">
            <el-tooltip
              effect="dark"
              :content="'star '+project.stargazers_count"
              placement="bottom"
            >
              <i class="el-icon-star-off" style="margin: 0px 5px 0px 0px"></i>
            </el-tooltip>
            {{project.stargazers_count}}
            <el-tooltip effect="dark" :content="'watch '+project.watchers_count" placement="bottom">
              <i class="el-icon-view" style="margin: 0px 5px 0px 15px"></i>
            </el-tooltip>
            {{project.watchers_count}}
            <el-tooltip effect="dark" :content="'fork '+project.forks_count" placement="bottom">
              <i class="el-icon-bell" style="margin: 0px 5px 0px 15px"></i>
            </el-tooltip>
            {{project.forks_count}}
          </el-col>
          <el-col :span="8" style="text-align: right;">
            <el-tag
              size="small"
              type="danger"
              v-if="project.license"
              style="margin-right: 10px"
            >{{project.license.key}}</el-tag>
            <el-tag size="small" type="success" v-if="project.language">{{project.language}}</el-tag>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <div style="text-align: center">
      <el-pagination
        @current-change="changePage"
        background
        layout="prev, pager, next"
        :current-page.sync="pageInfo.currentPage"
        :page-size="5"
        :total="pageInfo.count"
        hide-on-single-page
      ></el-pagination>
    </div>
  </Layout>
</template>

<page-query>
query($page: Int) {
  allProjects (perPage: 5, page: $page) @paginate {
    totalCount
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        name
        description
        updated_at
        html_url
        stargazers_count
        forks_count
        watchers_count
        language
        license {
          key
        }
      }
    }
  }
}
</page-query>

<script>
import { Pager } from "gridsome";
export default {
  metaInfo: {
    title: "博客列表"
  },
  components: {
    Pager
  },
  computed: {
    projects() {
      let projects = [];
      this.$page.allProjects.edges.forEach(x => projects.push(x.node));
      return projects;
    },
    pageInfo() {
      let pageInfo = {};
      pageInfo.count = this.$page.allProjects.totalCount;
      pageInfo.currentPage = this.$page.allProjects.currentPage;
      return pageInfo;
    },
    token() {
      return null;
    }
  },
  methods: {
    share(i) {
      this.$util.copy(this.projects[i].html_url);
      this.$message({
        message: "链接已复制,去分享给好友吧!!",
        type: "success"
      });
    },
    changePage(i) {
      if (i > 1) this.$router.push("/project/" + i).catch(() => {});
      else this.$router.push("/project").catch(() => {});
    },
    goGithub(url) {
      window.open(url);
    }
  }
};
</script>

<style scoped>
a {
  color: #1e6bb8;
}
.project {
  margin-bottom: 20px;
}
</style>
